<template>
	<!-- 顶部导航部分 -->
	<view class="title_topbox">
		<image class="title_topbox_headimg" src="../../static/头像.png"></image>
		<view class="title_topbox_searchbox">
			<image class="title_topbox_searchbox_searchimg" src="../../static/搜索.png"></image>
			<input type="text" placeholder="请输入搜索内容...">
		</view>
	</view>

	<!-- 切换栏 -->
	<view class="tabbarbxo">
		<view class="tabbar">
			<view class="tabbartext" v-for="(tab, index) in tabs" :key="index"
				:class="{ 'active': subCurrent === index }" @click="subChecked(index)">
				{{ tab }}
			</view>
		</view>
	</view>

	<!-- 导航栏内容部分 -->
	<view class="contentbox">
		<!-- 使用 v-for 遍历 contents 数组 -->
		<view class="tabcontentbox" v-for="(content, index) in contents" :key="index">
			<view class="tabcontentbox-firstbox">
				<image class="tabcontentbox-firstbox-avatar" :src="content.avatar"></image>
				<view class="tabcontentbox-firstbox-textbox">
					<view class="tabcontentbox-firstbox-textbox-nametext">{{ content.name }}</view>
					<view class="tabcontentbox-firstbox-textbox-timetext">{{ content.time }}</view>
				</view>
			</view>
			<view class="conten-textbox-text">{{ content.text }}</view>

			<view class="tabcontentbox-imgbox">
				<image class="tabcontentbox-imgbox-img" v-for="(image, imgIndex) in content.images" :src="image"
					:key="imgIndex"></image>
			</view>

			<!-- 分享好友 -->
			<view class="tabcontentbox-sharefriendbox">
				<view class="tabcontentbox-sharefriendbox-sharefriend">
					<image class="tabcontentbox-sharefriendbox-img" src="../../static/团队.png"></image>
					<view class="tabcontentbox-sharefriendbox-text">分享好友</view>
				</view>
			</view>
		</view>
	</view>
	<zdy-tabbar :current-page="3"></zdy-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['淘宝', '天猫', '京东', '拼多多', '抖音'],
				subCurrent: 0, // 默认选中第一个子tab
				contents: [{
						avatar: '../../static/logo.png',
						name: '淘宝优选达人',
						time: '18:24',
						text: '今日系统将得到更新,不影响功能的正常使用,更新功能:1.签到有礼2.分享机制',
						images: [
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
						]
					},
					{
						avatar: '../../static/logo.png',
						name: '拼夕夕杂选达人',
						time: '18:24',
						text: '今日系统将得到更新,不影响功能的正常使用,更新功能:1.签到有礼2.分享机制',
						images: [
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
							'../../static/logo.png',
						]
					}
				]
			};
		},
		methods: {
			subChecked(index) {
				this.subCurrent = index;
			},
		}
	}
</script>

<style>
	page {
		background: rgb(246, 246, 246);
	}

	/* 顶部导航部分 */
	.title_topbox {
		display: flex;
		padding: 2%;
		background: rgb(241, 224, 84);
		align-items: center;
	}

	.title_topbox_headimg {
		width: 35px;
		height: 35px;
		margin-right: 15px;
	}

	.title_topbox_searchbox {
		display: flex;
		align-items: center;
		background: white;
		padding: 2%;
		border-radius: 50px;
		width: 45%;
		margin-right: 20px;
		flex: 1;
	}

	.title_topbox_searchbox_searchimg {
		width: 20px;
		height: 17px;
		margin: 0 5px;
	}

	/* 切换栏样式 */
	.tabbarbxo {
		padding: 4% 3%;
		background: rgb(241, 224, 84);
	}

	.tabbar {
		display: flex;
		gap: 7%;
		align-items: center;
	}

	.tabbartext {
		font-size: 15px;
		color: rgb(120, 120, 120);
	}

	/* tab被选样式 */
	.active {
		position: relative;
		color: black;
		font-weight: bold;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 15px;
		height: 3px;
		background-color: black;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 25px;
		border-radius: 5px;
	}

	/* 导航栏内容部分 */
	.contentbox {
		padding: 2%;
		background-image: linear-gradient(to bottom, rgb(241, 224, 84), rgb(246, 246, 246) 10% 100%);
		padding-bottom: 20%;
	}

	.tabcontentbox {
		padding: 2%;
		background: white;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.tabcontentbox-firstbox {
		display: flex;
		align-items: center;
		padding: 2%;
	}

	.tabcontentbox-firstbox-avatar {
		display: block;
		width: 40px;
		height: 40px;
		margin-right: 2%;
		border-radius: 10px;
	}

	.tabcontentbox-firstbox-textbox {}

	.tabcontentbox-firstbox-textbox-nametext {
		font-size: 15px;
	}

	.tabcontentbox-firstbox-textbox-timetext {
		font-size: 12px;
		color: rgb(160, 160, 160);
	}

	.conten-textbox-text {
		font-size: 15px;
		padding: 2%;
	}

	.tabcontentbox-imgbox {
		display: flex;
		flex-wrap: wrap;
	}

	.tabcontentbox-imgbox-img {
		width: 30%;
		height: 98px;
		margin: 2% auto;
		border-radius: 10px;
	}

	.tabcontentbox-sharefriendbox {
		display: flex;
		justify-content: flex-end;
		padding: 2%;
	}

	.tabcontentbox-sharefriendbox-sharefriend {
		display: flex;
		align-items: center;
		border: 1px solid rgb(230, 230, 230);
		border-radius: 20px;
		padding: 2% 3%;
	}

	.tabcontentbox-sharefriendbox-img {
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}

	.tabcontentbox-sharefriendbox-text {
		font-size: 10px;
	}
</style>
